<!--基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面 : https://blog.csdn.net/x_lord/article/details/70212282-->
<!--基于vue.js 2.0，不使用webpack的nodejs服务，只在浏览器上单独使用在Element UI的Tree树形控件 : https://blog.csdn.net/x_lord/article/details/70161195-->
<!--csdn 枫似-->

<!-- 引入vue.js 先于element ui引入-->
<!--浏览器报错 Uncaught TypeError: Cannot read property 'prototype' of undefined 的解决办法 : https://blog.csdn.net/love_onefly/article/details/80612499-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<!--<script src="https://unpkg.com/vue@2.6.8/dist/vue.js"></script>-->
<script src="/static/vue/vue.js"></script>

<!-- 引入vue-barcode文件-->
<!--<script src="/static/vue-barcode/vue-barcode.js"></script>-->
<!-- 引入vue.js和vue-barcode.js都已经引入-->
<!--<script>Vue.component(VueBarcode.name, VueBarcode);</script>-->

<!--vue-qrcode-reader-->
<!--
<script src="https://unpkg.com/vue-qrcode-reader@1.3.1/dist/vue-qrcode-reader.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-qrcode-reader@1.3.1/dist/vue-qrcode-reader.css">
<script>Vue.use(VueQrcodeReader)</script>
-->

<!--vue-qr-reader-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue-qr-reader@1.6.0/dist/vue-qr-reader.min.js"></script>-->
<script src="/static/vue-qr-reader/vue-qr-reader.js"></script>

<!-- 引入element ui样式 -->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<link rel="stylesheet" href="/static/vue-element/vue-element.css">
<!-- 引入element ui组件库 -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="/static/vue-element/vue-element.js"></script>


<!--继承并定制模板-->
<div id="scanner">
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1" @click="dialogVisible = !dialogVisible">
            <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
        </span>

{#        {% include "django/forms/widgets/input.html" %}#}
        <input
            type="{{ widget.type }}"
            name="{{ widget.name }}"
{#            value="{{ widget.value|stringformat:'s' }}"#}
            :value="widgetValue"
            {% include "django/forms/widgets/attrs.html" %}
        />
    </div>
    <el-dialog
            id="dialog"
            title="扫一扫"
            :visible.sync="dialogVisible"
            width="90%"
            :before-close="handleClose">

        <!--vue-barcode显示条码-->
        <!--
        <barcode style="width: 100%;height: 100%;" value="201980311" :options="options"></barcode>
        -->
        <!--vue-barcode显示条码-->


        <!--vue-qrcode-reader-->
        <!--
        <p>Last result: <b>{vue{ decodedContent }vue}</b></p>
        <p class="error">{vue{ errorMessage }vue}</p>
        <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
        <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
        -->
        <!--vue-qrcode-reader-->


        <!--vue-qr-reader-->
        <div>Value: {vue{ scanned }vue}</div>
        <div>Error: {vue{ errorMessage }vue}</div>
        <vue-qr-reader ref="qr"

                       v-on:code-scanned="codeScanned"
                       stop-on-scanned="false"
                       use-back-camera="true"
                       draw-on-found="true"
                       line-color="	#FFB6C1"
                       line-width="20"
                       video-height="480"
                       video-width="640"
                       responsive="true">
        </vue-qr-reader>
        <!--vue-qr-reader-->


        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = !dialogVisible">取 消</el-button>
            <el-button type="primary" @click="commitScanned">确 定</el-button>
            <!--只有按叉和点击对话框以外区域才触发before-close，也就要是说按叉和点击对话框以外区域等效-->
        </span>
    </el-dialog>
</div>


<script>
    let originValue = "{{ widget.value|stringformat:'s' }}" === "None"? "" : "{{ widget.value|stringformat:'s' }}";
    // 千万注意字符型模板变量传递给js时加引号
    const scanner = new Vue({
        el : '#scanner',
        delimiters : ["{vue{", "}vue}"],
        created(){
            this.widgetValue = originValue
        },
        data : function() {
            return {

                /*
                // vue-barcode
                options: {
                    displayValue:false
                },
                */

                // element dialog
                dialogVisible: false,

                /*
                // vue-qrcode-reader
                decodedContent: '',
                errorMessage: '',
                */

                // vue-qr-reader
                scanned: '',
                errorMessage:'',
                widgetValue:originValue  // 在create时赋值
            }
        },
        commponents: {},
        methods: {

            // element dialog
            handleClose: function () {
                this.dialogVisible = !this.dialogVisible;
            },

            /*
            // vue-qrcode-reader
            onDecode(content) {
                this.decodedContent = content
            },
            onInit(promise) {
                promise.then(() => {
                    console.log('Successfully initilized! Ready for scanning now!')
                })
                    .catch(error => {
                        if (error.name === 'NotAllowedError') {
                            this.errorMessage = 'Hey! I need access to your camera'
                        } else if (error.name === 'NotFoundError') {
                            this.errorMessage = 'Do you even have a camera on your device?'
                        } else if (error.name === 'NotSupportedError') {
                            this.errorMessage = 'Seems like this page is served in non-secure context (HTTPS, localhost or file://)'
                        } else if (error.name === 'NotReadableError') {
                            this.errorMessage = 'Couldn\'t access your camera. Is it already in use?'
                        } else if (error.name === 'OverconstrainedError') {
                            this.errorMessage = 'Constraints don\'t match any installed camera. Did you asked for the front camera although there is none?'
                        } else {
                            this.errorMessage = 'UNKNOWN ERROR: ' + error.message
                        }
                    })
            }
            */
            // vue-qr-code
            codeScanned(event) {
                this.scanned = event.detail[0];
                console.log(this.scanned)
            },
            errorCaptured(error) {
                switch (error.name) {
                    case 'NotAllowedError':
                    this.errorMessage = 'Camera permission denied.'
                    break;
                    case 'NotFoundError':
                    this.errorMessage = 'There is no connected camera.'
                    break;
                    case 'NotSupportedError':
                    this.errorMessage = 'Seems like this page is served in non-secure context.'
                    break;
                    case 'NotReadableError':
                    this.errorMessage = 'Couldn\'t access your camera. Is it already in use?'
                    break;
                    case 'OverconstrainedError':
                    this.errorMessage = 'Constraints don\'t match any installed camera.'
                    break;
                    default:
                    this.errorMessage = 'UNKNOWN ERROR: ' + error.message
                }
                console.error(this.errorMessage);
            },
            commitScanned(){
                this.widgetValue = this.scanned;
                this.dialogVisible = !this.dialogVisible
            }
        }
    });


</script>

{#django/forms/widgets.py#}
{##}
{#class Widget(six.with_metaclass(RenameWidgetMethods)):#}
{#    ......#}
{#    def get_context(self, name, value, attrs):#}
{#        # 定义了模板中可调用的变量#}
{#        context = {}#}
{#        context['widget'] = {#}
{#            'name': name,#}
{#            'is_hidden': self.is_hidden,#}
{#            'required': self.is_required,#}
{#            'value': self.format_value(value),#}
{#            'attrs': self.build_attrs(self.attrs, attrs),#}
{#            'template_name': self.template_name,#}
{#        }#}
{#        return context#}
{#   ......#}
{##}
{#class Input(Widget):#}
{#    """#}
{#    Base class for all <input> widgets.#}
{#    """#}
{#    input_type = None  # Subclasses must define this.#}
{#    template_name = 'django/forms/widgets/input.html'#}
{#    def __init__(self, attrs=None):#}
{#        if attrs is not None:#}
{#            attrs = attrs.copy()#}
{#            self.input_type = attrs.pop('type', self.input_type)#}
{#        super().__init__(attrs)#}
{#    def get_context(self, name, value, attrs):#}
{#        context = super().get_context(name, value, attrs)#}
{#        context['widget']['type'] = self.input_type#}
{#        return context#}
{##}
{#class TextInput(Input):#}
{#    input_type = 'text'#}
{#    template_name = 'django/forms/widgets/text.html'#}


{#django/forms/widgets/input.html#}
{#<input#}
{#        type="{{ widget.type }}"#}
{#        name="{{ widget.name }}"#}
{#        {% if widget.value != None %}#}
{#            value="{{ widget.value|stringformat:'s' }}"#}
{#        {% endif %}#}
{#        {% include "django/forms/widgets/attrs.html" %}#}
{#/>#}


{#django/forms/widgets/attrs.html#}
{#{% for name, value in widget.attrs.items %}#}
{#    {% if value is not False %} #}
{#        {{ name }}  #}
{#        require = False > 无require属性#}
{#        require = True  > require#}
{#        class = "name-of-class"#}
{#        {% if value is not True %}#}
{#            ="{{ value|stringformat:'s' }}"#}
{#        {% endif %}#}
{#    {% endif %}#}
{#{% endfor %}#}